<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div class="dd">
    <h3>计算属性(只读)</h3>
    姓：{{name1}} <br>名：{{name2}}<br> 全程 :{{myName}}
    <h3>计算属性(可读写)</h3>
    姓：{{name1}} <br>名：{{name2}}<br> 全程 :{{myName}}
    <input v-model="myName1">
    <h3> watch 属性值监听</h3>
    <input v-model="number" type="number">
</div>
<script>
  var v = new Vue({
    el:".dd",
    data : {
      name1 :"张",
      name2: "三"
    },
    //计算属性节点
    computed :{
      //函数名=》 属性值 返回值 =》属性值
        myName(){
            return this.name1+ this.name2;
        },
        myName1:{
             //取值
            get(){
                return this.name1 +this.name2;
            },
            //设值
            //属性监听
            set(newValue){
                //暂时不考虑
                this.name1=newValue.substring(0,1);
            }

        }

    },
      watch:{
          number(newValue,oldValue){
              console.info(newValue,oldValue);
              this.name1+=newValue;
          }
      }
  });
</script>
</body>
</html>